<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="body">
        <div class="title">KWIC</div>
        <div class="top">
            <span>提交你的文档</span>
             <input type="file" id="inputFile" accept=".txt">
             <button>提交</button>
        </div>
        <div class="contianer">
        <div class="one"><span>主程序-子程序</span>
        <div id="output1" class="text"></div>
        </div>
        <div class="two"><span>面向对象</span>
        <div id="output2" class="text">
        </div></div>
        <div class="three" ><span>事件系统</span>
        <div id="output3" class="text">
            
        </div></div>
        <div class="four"><span>管道-过滤器</span>
        <div id="output4" class="text"></div></div>
    </div>
    </div>
</body>
<style>
.title {
    text-align: center;
    font-weight: 1000;
    font-size: xx-large;
    margin-bottom: 5vh;
}
.text {
    margin-top: 20px;
    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 17px;
}
    .top {
         display: flex;
        flex-direction: column;
        align-items: center;
        height: 15vh;
        margin-top: 1vh;
        margin-bottom: 6.5vh;
         background-color: rgb(243, 246, 246);
            border: 1px solid rgb(166, 161, 161);
        border-radius: 20px;
    }
    .top span {
        margin-top: 15px;
        font-size: 20px;
        font-weight: bold;
    }
    #inputFile {
        margin-right: -85px;
        margin-top: 20px;
    }
    .contianer {
        display: flex;
        justify-content: space-around;
    }

    .contianer > *:nth-child(n+1) {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 23%;
        height: 60vh;
        background-color: rgb(243, 246, 246);
        border: 1px solid rgb(166, 161, 161);
        border-radius: 20px;
}
    .contianer div span {
        margin-top: 10px;
        font-size: 21px;
        font-weight: 800;
    }
</style>
<script>
    // #region
    // 随机颜色
    const title = document.querySelector('.title')
    function getRandomColor() {
            //#ffffff
                let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
                let color = []
                for (let i = 0; i < 6; i++) {
                    color[i] = arr[Math.floor(Math.random() * arr.length)]
                }
                title.style.color = `#${color[0]}${color[1]}${color[2]}${color[3]}${color[4]}${color[5]}`
        }
   const randomColor = setInterval(()=>{
       getRandomColor()
    },100) 
// 页面关闭或跳转时关闭定时器
    window.addEventListener('beforeunload', function (event) {
        clearInterval(randomColor);
});


// 请求
// 文本内容
let text = null
let sentences = null
var input = document.getElementById('inputFile');
input.addEventListener('change', function(e) {
        var files = e.target.files; // 获取文件列表
        if (files.length) {
            var file = files[0]; // 获取单个文件
            var reader = new FileReader(); // 创建FileReader对象

            // 为FileReader对象添加'load'事件监听器
            reader.onload = function(e) {
                // e.target.result 包含了文件的内容
                 text = e.target.result;
                  sentences = text.split(/\r?\n/)
                  console.log(sentences);
            };

            // 读取文件内容
            reader.readAsText(file);
        }
 
    
    });
   let button = document.querySelector('button')
   button.addEventListener('click',()=>{
  
    // console.log(sentences);
    
    //    // 发出请求
       axios({
            url: 'http://localhost:8080/admin/appTest1',
            method:'post',
            data:{
                lineTxt:sentences
            }
        }).then(result => {
        let data = result.data.data            
          console.log(result);
          document.getElementById('output1').innerHTML = data.map(item => `<div class="list">${item}</div>`).join('')
        })
         axios({
            url: 'http://localhost:8080/admin/appTest2',
            method:'post',
            data:{
                lineTxt:sentences
            }
        }).then(result => {
        let data = result.data.data            
          console.log(result);
          document.getElementById('output2').innerHTML = data.map(item => `<div class="list">${item}</div>`).join('')
        })
         axios({
            url: 'http://localhost:8080/admin/appTest3',
            method:'post',
            data:{
                lineTxt:sentences
            }
        }).then(result => {
        let data = result.data.data            
          console.log(result);
          document.getElementById('output3').innerHTML = data.map(item => `<div class="list">${item}</div>`).join('')
        })
         axios({
            url: 'http://localhost:8080/admin/appTest4',
            method:'post',
            data:{
                lineTxt:sentences
            }
        }).then(result => {
        let data = result.data.data            
          console.log(result);
          document.getElementById('output4').innerHTML = data.map(item => `<div class="list">${item}</div>`).join('')
        })
   })
//#endregion
</script>
</html>